<template>
  <div class="wrapper">
    <div style="display: flex; max-width: 1200px">
      <el-card shadow="hover" class="hover-zoom">
        <template #header>
          <div class="header-wrapper">
            <el-icon style="margin-right: 12px"><Pointer /></el-icon>
            <div>请点击下方按钮跳转到打卡页面</div>
          </div>
        </template>
        <div class="card-text">
          <p>该页面可用于跳转到本席位或SUP席位的打卡页面</p>
          <p>如果本席位号识别错误请使用原打卡系统</p>
          <p>原打卡系统不可同时打开，使用前请先关闭原打卡系统</p>
          <p>打卡后可请关闭打卡页面</p>
        </div>
        <el-divider />
        <div class="link-container">
          <el-button
            type="success"
            icon="Link"
            size="large"
            link
            @click="handleOpenInNewWindow"
            >{{ seatStore.currentSeat.seatName }}&nbsp;打卡</el-button
          >
          <el-button
            type="primary"
            icon="Link"
            size="large"
            link
            @click="handleOpenSup01"
            >SUP01&nbsp;打卡</el-button
          >
          <el-button
            type="primary"
            icon="Link"
            size="large"
            link
            @click="handleOpenSup02"
            >SUP02&nbsp;打卡</el-button
          >
        </div>
      </el-card>

      <!-- <el-divider direction="vertical" /> -->
      <!-- <el-divider /> -->
      <div style="padding: 16px"></div>
      <el-card shadow="hover" class="hover-zoom">
        <template #header>
          <div class="header-wrapper">
            <el-icon style="margin-right: 12px"><Search /></el-icon>
            <div>请点击下方按钮跳转到小时查询页面</div>
          </div>
        </template>
        <!-- <el-divider /> -->
        <div class="card-text" style="padding-bottom: 60px">
          <p>如果您只需要查看值班报表，<b>请点击最下方链接</b></p>
          <p>以避免影响本席位正常打卡</p>
        </div>
        <el-divider />
        <div class="link-container">
          <el-button
            link
            type="primary"
            icon="Link"
            size="large"
            @click="handleOpenTableOrg12"
            >一室个人值班报表</el-button
          >
          <el-button
            link
            type="primary"
            icon="Link"
            size="large"
            @click="handleOpenTableOrg13"
            >二室个人值班报表</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
  <!-- <pre>{{ iframeSrc }}</pre> -->
</template>

<script setup>
import { ref, nextTick, computed } from "vue";
import useSeatStore from "@/store/seat";
const seatStore = useSeatStore();
const iframeSrc = computed(() => {
  if (seatStore.currentSeat && seatStore.currentSeat.seatName != "") {
    return (
      "http://172.22.107.22/atcos/loginGet?userName=" +
      seatStore.currentSeat.seatName +
      "&pwd=" +
      seatStore.currentSeat.seatName
    );
  } else {
    return "http://172.22.107.22/atcos/loginGet?userName=PREP&pwd=PREP";
  }
});
const showIframe = ref(true);

function handleOpenInNewWindow() {
  window.open(iframeSrc.value, "_blank");
}

function handleOpenSup01() {
  let url = "http://172.22.107.22/atcos/loginGet?userName=SUP01&pwd=SUP01";
  window.open(url, "_blank");
}

function handleOpenSup02() {
  let url = "http://172.22.107.22/atcos/loginGet?userName=SUP02&pwd=SUP02";
  window.open(url, "_blank");
}

function handleRefreshIframe() {
  showIframe.value = false;
  nextTick(() => {
    showIframe.value = true;
  });
}

function handleOpenTableOrg12() {
  let url =
    "http://172.22.107.22/WebReport/ReportServer?reportlet=%E6%96%B0%E7%89%88_%E7%AE%A1%E5%88%B6%E6%B4%A5%E8%B4%B4%E4%B8%AA%E4%BA%BA%E6%8A%A5%E8%A1%A8.cpt&op=view&userId=12&orgId=12";
  window.open(url, "_blank");
}

function handleOpenTableOrg13() {
  let url =
    "http://172.22.107.22/WebReport/ReportServer?reportlet=%E6%96%B0%E7%89%88_%E7%AE%A1%E5%88%B6%E6%B4%A5%E8%B4%B4%E4%B8%AA%E4%BA%BA%E6%8A%A5%E8%A1%A8.cpt&op=view&userId=12&orgId=13";
  window.open(url, "_blank");
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hover-zoom {
  transition: all 0.75s ease-out;
}

.hover-zoom:hover {
  transform: scale(1.025);
}

.header-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bolder;
}
.card-text {
  padding-bottom: 12px;
  line-height: 24px;
  text-align: justify;
  opacity: 0.8;
}

.link-container {
  padding: 8px 0;
}

.link-container > *:not(last-child) {
  padding-right: 12px;
}
</style>
